import React from "react";
export default class Cell extends React.Component{

    playChess(){
        const {data,row,col}=this.props
        if(data !==0){
            return
        }
        // console.log(row)
        // console.log(col)
        this.props.playChess(row,col)
    }
    render(){
        let colStyle = {}
        // console.log(this.props)
        const {data,row,col} = this.props

        if(row ===0){
            colStyle.height = "50%"
            colStyle.top = "50%"
        }else if(row === 14){
            colStyle.height = "50%"
        }
        let rowStyle = {}
        if(col ===0){
            rowStyle.width = "50%"
            rowStyle.left = "50%"
        }else if(col ===14){
            rowStyle.width = "50%"
        }
        // const checkerboard=new Array(15).fill(0);
        return(
            <div className="cell-container" onClick={this.playChess.bind(this)}>
                <div className="cell-row" style={rowStyle}/>
                <div className="cell-col" style={colStyle}/>
                {
                    data === 1 && <div className="black"/>
                }
                {
                    data === 2 && <div className="white"/>
                }
            </div>
        )

    }
}